<template>
  <div>
    <a-input :value="gmsValue" placeholder="请选择" :disabled="disabled" @click="openModal" />
    <a-modal :open="open" width="700px" title="过敏信息" centered :get-container="getContainer" @cancel="onCancel" @ok="onOk">
      <div class="h-[360px] overflow-y-scroll">
        <BaseTable :columns="columns" :data-source="tableData" :loading="loading" :pagination="null">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'NO'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'dictItemName'">
              {{ record.editLock ? record.dictItemName + '（已查）' : record.dictItemName }}
            </template>
            <template v-if="column.dataIndex === 'status'">
              <!-- 过敏状态;0:未查|1：无|2：有 -->
              <a-form-item-rest>
                <a-radio-group v-model:value="record.status" :disabled="record.editLock">
                  <a-radio :value="0">未查</a-radio>
                  <a-radio :value="1">阴性</a-radio>
                  <a-radio :value="2">阳性</a-radio>
                </a-radio-group>
              </a-form-item-rest>
            </template>
          </template>
        </BaseTable>
      </div>
      <div class="mt-6">
        <a-textarea v-model:value="brGms" placeholder="请输入过敏信息" :auto-size="{ minRows: 4, maxRows: 5 }" />
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { post } from '@/utils/request'

const tableData = ref([])
const open = ref(false)
const loading = ref(false)
const props = defineProps({
  brId: {
    type: String,
    default: () => ''
  },
  value: {
    type: String,
    default: () => ''
  },
  getContainer: {
    type: String,
    default: () => ''
  },
  sourceData: {
    type: Array,
    default: () => []
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

const emit = defineEmits(['update:value', 'success'])

const columns = ref([
  {
    title: '序号',
    dataIndex: 'NO',
    width: 60
  },
  {
    title: '过敏类目',
    dataIndex: 'dictItemName'
  },
  {
    title: '过敏结果',
    width: 240,
    dataIndex: 'status'
  }
])
const gmsValue = ref('')
const brGms = ref('')

const getData = async () => {
  loading.value = true
  const { code, data } = await post('/operation/opex/getDictCommonItemList', {
    dictCommonCode: 'DT00032',
    status: 1
  })
  loading.value = false
  if (code === 0) {
    tableData.value = data.map((item) => {
      item.status = 0
      return item
    })
  }
}
const openModal = () => {
  open.value = true
  if (props.sourceData && props.sourceData.length > 0) {
    tableData.value = JSON.parse(JSON.stringify(props.sourceData))
  } else {
    getData()
  }
}
const onCancel = () => {
  open.value = false
}
const onOk = () => {
  gmsValue.value = formatValue(tableData.value, brGms.value)
  emit('update:value', brGms.value)
  emit('success', { data: tableData.value })
  open.value = false
}
const formatValue = (patientAllergys, gms) => {
  let result = ''
  if (patientAllergys && patientAllergys.length > 0) {
    const selectArr = patientAllergys.filter((item) => {
      return item.status === 2
    })
    if (selectArr && selectArr.length > 0) {
      selectArr.forEach((item, index) => {
        if (selectArr.length === index + 1) {
          result += item.dictItemName + ' (+)'
        } else {
          result += item.dictItemName + ' (+)' + '、'
        }
      })
      gms && (result = result + '、' + gms)
    } else {
      gms && (result = gms)
    }
  } else {
    gms && (result = gms)
  }
  return result
}
watch(
  () => props.value,
  (val) => {
    brGms.value = val
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => props.brId,
  (val) => {
    if (val) gmsValue.value = formatValue(props.sourceData, props.value)
  },
  {
    immediate: true
  }
)
onMounted(() => {
  gmsValue.value = formatValue(props.sourceData, props.value)
})
</script>
